<template>
    <div class="login-container">
        <div class="form-container">
            <div class="form-title">Shopping 后台管理</div>
            <el-form :model="form" status-icon :rules="rules" ref="form">
                <el-form-item prop="username">
                    <el-input type="text" v-model="form.username" @keyup.enter.native="submitForm('form')" clearable prefix-icon="fa fa-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="form.password" clearable prefix-icon="fa fa-lock" @keyup.enter.native="submitForm('form')" show-password autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input type="text" v-model="form.code" prefix-icon="fa fa-shield" class="codeInput" @keyup.enter.native="submitForm('form')" autocomplete="off"></el-input>
                    <el-tooltip content="点击切换验证码" placement="top" effect="light">
                        <div @click="getIdentify" class="codeDiv" v-html="idenSvg"></div>
                    </el-tooltip>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="submitBtn" @click="submitForm('form')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <vue-particles color="#dedede" :particleOpacity="0.2" :particlesNumber="60" shapeType="polygon" :particleSize="3" linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.1" :linesDistance="150" :moveSpeed="1" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="repulse" class="vue-particles">
        </vue-particles>
    </div>
</template>

<script>
import { checkPassword } from "@/utils/checks";
import { login, getCode } from "@/api/login";
export default {
    data() {
        let vUserName = (rule, value, callback) => {
            if (!value || "" == value.trim()) {
                return callback(new Error("用户名不能为空"));
            } else {
                callback();
            }
        };
        let vPassword = (rule, value, callback) => {
            if (!value || "" == value.trim()) {
                return callback(new Error("密码不能为空"));
            } else if (!checkPassword(value)) {
                return callback(new Error("密码格式错误"));
            } else {
                callback();
            }
        };
        let vCode = (rule, value, callback) => {
            if (!value || "" == value.trim()) {
                return callback(new Error("验证码不能为空"));
            } else if (value != this.idenCode) {
                this.getIdentify();
                return callback(new Error("验证码错误"));
            } else {
                callback();
            }
        };
        return {
            idenCode: "",
            idenSvg: "",
            form: {
                username: "",
                password: "",
                code: "",
            },
            rules: {
                username: [
                    {
                        validator: vUserName,
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        validator: vPassword,
                        trigger: "blur",
                    },
                ],
                code: [
                    {
                        validator: vCode,
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    mounted() {
        this.getIdentify();
    },
    methods: {
        getIdentify() {
            getCode().then((e) => {
                this.idenSvg = e.data.data;
                this.idenCode = e.data.text;
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let username = this.form.username;
                    let password = this.form.password;
                    login({
                        username,
                        password,
                    }).then((e) => {
                        if (e.data.code == "0") {
                            this.$message.success(e.data.message);
                            // 登陆成功 跳转
                            this.$router.push({ path: "/main" });
                        } else {
                            this.$message.error(e.data.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
    },
};
</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100%;
    background-color: #2d3a4b;
    position: relative;
}

.login-container .vue-particles {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 2;
}

.form-container {
    position: relative;
    width: 30%;
    max-width: 100%;
    min-width: 450px;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
    z-index: 999;
}

.form-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 26px;
    color: #eee;
    font-weight: 700;
}

.el-form-item {
    margin: 35px 0;
}
.codeInput {
    width: 60%;
}
.codeDiv {
    display: inline-block;
    border: 1px solid #b8c7b2;
    /* border-radius: 5px; */
    min-width: 20%;
    height: 40px;
    position: absolute;
    right: 5px;
    cursor: pointer;
}
.codeDiv svg {
    height: 100%;
    width: 100%;
}

.submitBtn {
    width: 100%;
}
/* input */
.form-container /deep/ .el-input__inner {
    background-color: #000;
    color: #fff;
}
</style>